<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="head">
        <script type="text/javascript">
            function skinChart() {
                this.cfg.shadow = false;
                this.cfg.seriesColors = ['#71CC8D', '#33AFDE', '#F7941E'];
                this.cfg.grid = {
                    background: '#EDF3F6',
                    borderColor: '#D9E3E8',
                    gridLineColor: '#D9E3E8',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#778D9B'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    markerOptions: {
                        shadow: false
                    }
                }
            }

            function skinPie() {
                this.cfg.seriesColors = ['#dae8ef', '#27aae1', '#33ccff', '#9fadb5'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#eaeaea',
                    gridLineColor: '#e5ebf0',
                    shadow: false,
                    borderWidth: 0
                };
                this.cfg.seriesDefaults.shadow = false;
            }
        </script>
        <style type="text/css">
            .jqplot-target, .jqplot-axis {
                color: #778D9B;
            }
        </style>
    </ui:define>

    <ui:define name="content">
        <!-- BOX START -->
        <div class="layout-portlets-box">
            <div class="Container20 Responsive">
                <div class="ContainerIndent">
                    <div class="Container100">

                        <div class="DispInlBlock MarTop20">
                            <div class="Container20"><i class="fa fa-user Fs50 red Fleft MarRight10"/></div>
                            <div class="Container80">
                                <div class="Fright">
                                    <h2 class="black Fs24 FontRalewayMedium">John DOE</h2>
                                    <span class="Fs15 gray FontRalewayRegular DispBlock">Senior Marketing Manager</span>
                                </div>
                            </div>
                        </div>
                        <div class="Seperator"/>
                        <i class="fa fa-clock-o Fleft Fs15 gray MarRight10"/>
                        <span class="Fleft Fs12 softgray">Your last login - 18.08.2015  16:30</span>
                        <div class="Container100 MarTop20">
                            <a href="#" class="Wid30 Responsive BorderedBox Fleft TexAlCenter HoverEffect">
                                <div class="ContainerIndent">
                                    <div class="EmptyBox10"/>
                                    <i class="fa fa-bell Fs24 animated swing infinite gray"/>
                                    <span class="Fs10 DispBlock gray">Messages</span>
                                    <span class="Fs24 DispBlock red">24</span>
                                    <div class="EmptyBox10"/>
                                </div>
                            </a>
                            <a href="#" class="Wid30 Responsive BorderedBox Fleft TexAlCenter HoverEffect" style="margin-left:5%;">
                                <div class="ContainerIndent">
                                    <div class="EmptyBox10"/>
                                    <i class="fa fa-briefcase gray Fs24"/>
                                    <span class="Fs10 DispBlock gray">Tasks</span>
                                    <span class="Fs24 DispBlock red">19</span>
                                    <div class="EmptyBox10"/>
                                </div>
                            </a>
                            <a href="#" class="Wid30 Responsive BorderedBox Fright TexAlCenter HoverEffect">
                                <div class="ContainerIndent">
                                    <div class="EmptyBox10"/>
                                    <i class="fa fa-bar-chart gray Fs24"/>
                                    <span class="Fs10 DispBlock gray">Reports</span>
                                    <span class="Fs24 DispBlock red">26</span>
                                    <div class="EmptyBox10"/>
                                </div>
                            </a>
                        </div>
                        <div class="Container100 MarTop20 TexAlLeft">
                            <div class="Fs16 gray FontRalewayRegular"><i class="fa fa-star MarRight10 orange"/>Your Latest Links</div>
                            <div class="Seperator"/>
                            <a href="#" class="Fs14 blue DispBlock FontRalewayRegular Fleft HoverLink"><i class="fa fa-tag"/> Sales Reports</a>
                            <div class="EmptyBox10"/>
                            <a href="#" class="Fs14 blue DispBlock FontRalewayRegular Fleft HoverLink"><i class="fa fa-tag"/> Dealers Map And Info</a>
                            <div class="EmptyBox10"/>
                            <a href="#" class="Fs14 blue DispBlock FontRalewayRegular Fleft HoverLink"><i class="fa fa-tag"/> Marketing Strategies News</a>
                            <div class="EmptyBox10"/>
                            <a href="#" class="Fs14 blue DispBlock FontRalewayRegular Fleft HoverLink"><i class="fa fa-tag"/> Company Turnover Info</a>
                            <div class="EmptyBox10"/>
                            <a href="#" class="Fs14 blue DispBlock FontRalewayRegular Fleft HoverLink"><i class="fa fa-tag"/> Dealers Map And Info</a>
                            <div class="EmptyBox10"/>
                            <a href="#" class="Fs14 blue DispBlock FontRalewayRegular Fleft HoverLink"><i class="fa fa-tag"/> Marketing Strategies News</a>
                            <div class="EmptyBox10"/>
                            <a href="#" class="Fs14 blue DispBlock FontRalewayRegular Fleft HoverLink"><i class="fa fa-tag"/> Company Turnover Info</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="Container25 Responsive">
                <div class="ContainerIndent">
                    <div class="Container100 TexAlCenter">

                        <div class="DispInlBlock TexAlLeft MarTop20">
                            <div class="Container20"><i class="fa fa-line-chart Fs40 orange Fleft MarRight10"/></div>
                            <div class="Container80">
                                <div class="Fright">
                                    <h2 class="black Fs24 FontRalewayMedium">Visitors Stats</h2>
                                    <span class="Fs15 gray FontRalewayRegular DispBlock">Today, Overall And Online</span>
                                </div>
                            </div>
                        </div>
                        <div class="Seperator"/>
                        <div class="Container100">
                            <div class="Wid45 BorderedBox Fleft TexAlCenter">
                                <div class="ContainerIndent">
                                    <div class="EmptyBox10"/>
                                    <div class="Fs14 gray FontRalewayRegular">Today's Visits</div>
                                    <div class="EmptyBox10"/>
                                    <div class="Fs30 blue FontRalewayLight">795</div>
                                    <div class="EmptyBox10"/>
                                </div>
                            </div>
                            <div class="Wid45 BorderedBox Fright TexAlCenter">
                                <div class="ContainerIndent">
                                    <div class="EmptyBox10"/>
                                    <div class="Fs14 gray FontRalewayRegular">Overall Visits</div>
                                    <div class="EmptyBox10"/>
                                    <div class="Fs30 blue FontRalewayLight">3.455</div>
                                    <div class="EmptyBox10"/>
                                </div>
                            </div>
                            <div class="Wid45 BorderedBox Fleft TexAlCenter">
                                <div class="ContainerIndent">
                                    <div class="EmptyBox10"/>
                                    <div class="Fs14 gray FontRalewayRegular">Online Visitors</div>
                                    <div class="EmptyBox10"/>
                                    <div class="Fs30 red FontRalewayLight animated pulse infinite"><i class="fa fa-desktop Fs24"/> 795</div>
                                    <div class="EmptyBox10"/>
                                </div>
                            </div>
                            <div class="Wid45 BorderedBox Fright TexAlCenter">
                                <div class="ContainerIndent">
                                    <div class="EmptyBox10"/>
                                    <div class="Fs14 gray FontRalewayRegular">Last Year</div>
                                    <div class="EmptyBox10"/>
                                    <div class="Fs30 orange FontRalewayLight">23.189</div>
                                    <div class="EmptyBox10"/>
                                </div>
                            </div>
                            <div class="Wid45 BorderedBox Fleft TexAlCenter">
                                <div class="ContainerIndent">
                                    <div class="EmptyBox10"/>
                                    <div class="Fs14 gray FontRalewayRegular">Last Month</div>
                                    <div class="EmptyBox10"/>
                                    <div class="Fs30 orange FontRalewayLight">7.789</div>
                                    <div class="EmptyBox10"/>
                                </div>
                            </div>
                            <div class="Wid45 BorderedBox Fright TexAlCenter">
                                <div class="ContainerIndent">
                                    <div class="EmptyBox10"/>
                                    <div class="Fs14 gray FontRalewayRegular">Last Week</div>
                                    <div class="EmptyBox10"/>
                                    <div class="Fs30 orange FontRalewayLight">1.517</div>
                                    <div class="EmptyBox10"/>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="Container100 TexAlCenter MarTop20">
                        <p:button value="Get All Stats"/>
                    </div>
                </div>
            </div>
            <div class="Container25 Responsive">
                <div class="ContainerIndent">
                    <div class="Container100 TexAlCenter">

                        <div class="DispInlBlock TexAlLeft MarTop20">
                            <i class="fa fa-car Fs40 gray Fleft MarRight10"/>
                            <div class="Fleft">
                                <h2 class="black Fs24 FontRalewayMedium">Sales Reports</h2>
                                <span class="Fs15 gray FontRalewayRegular DispBlock">USA, Europe, Asia..</span>
                            </div>
                        </div>
                        <div class="Seperator"/>
                        <div class="Container100">
                            <a href="#" class="Wid45 BorderedBox Fleft TexAlCenter HoverEffect">
                                <div class="ContainerIndent">
                                    <div class="EmptyBox10"/>
                                    <img src="#{resource['demo:images/usa.png']}" class="Fleft Wid60" />
                                    <div class="Fs14 gray">USA</div>
                                    <div class="Fs24 red FontRalewayRegular">54.657</div>
                                    <div class="EmptyBox10"/>
                                </div>
                            </a>
                            <a href="#" class="Wid45 BorderedBox Fright TexAlCenter HoverEffect">
                                <div class="ContainerIndent">
                                    <div class="EmptyBox10"/>
                                    <img src="#{resource['demo:images/southamerica.png']}" class="Fleft Wid60" />
                                    <div class="Fs14 gray">South America</div>
                                    <div class="Fs24 red FontRalewayRegular">13.365</div>
                                    <div class="EmptyBox10"/>
                                </div>
                            </a>
                            <a href="#" class="Wid45 BorderedBox Fleft TexAlCenter HoverEffect">
                                <div class="ContainerIndent">
                                    <div class="EmptyBox10"/>
                                    <img src="#{resource['demo:images/europe.png']}" class="Fleft Wid60" />
                                    <div class="Fs14 gray">Europe</div>
                                    <div class="Fs24 red FontRalewayRegular">29.456</div>
                                    <div class="EmptyBox10"/>
                                </div>
                            </a>
                            <a href="#" class="Wid45 BorderedBox Fright TexAlCenter HoverEffect">
                                <div class="ContainerIndent">
                                    <div class="EmptyBox10"/>
                                    <img src="#{resource['demo:images/africa.png']}" class="Fleft Wid60" />
                                    <div class="Fs14 gray">Africa</div>
                                    <div class="Fs24 red FontRalewayRegular">44.657</div>
                                    <div class="EmptyBox10"/>
                                </div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="Container30 Responsive100">
                <div class="ContainerIndent">
                    <div class="Container100 TexAlCenter">

                        <div class="DispInlBlock TexAlLeft MarTop20">
                            <i class="fa fa-calendar Fs40 blue Fleft MarRight10"/>
                            <div class="Fleft">
                                <h2 class="black Fs24 FontRalewayMedium">Dealers Meetings</h2>
                                <span class="Fs15 gray FontRalewayRegular DispBlock">Specified For All Countries</span>
                            </div>
                        </div>
                        <div class="Seperator"/>
                        <div class="Wid100 Fleft">
<!--                            <p:schedule id="schedule"
                                        value="#{scheduleView.eventModel}"
                                        locale="en_US"
                                        timeZone="GMT+6"/>-->
                            <p:schedule id="schedule"
                                        value="#{scheduleView.eventModel}"
                                        locale="zh"
                                        timeZone="GMT+8"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- BOX END -->

        <!-- BOX START -->
        <div class="layout-portlets-box">
            <div class="Container30 Responsive50">
                <div class="ContainerIndent">
                    <div class="BigTopic">
                        <h2 class="black Fs24 FontRalewayMedium"><i class="fa fa-ioxhost Fleft red MarRight10"/> Stock Exchanges</h2>
                        <span class="Fs15 gray FontRalewayRegular DispBlock">NASDAQ, Dow Jones, NIKKEI, DAX</span>
                    </div>
                    <div class="EmptyBox10"/>
                    <div class="Container100">
                        <div class="Fleft MarRight20 MarBot10">
                            <span class="gray Fs21 FontRalewayMedium DispBlock">USD ($)</span>
                            <span class="green FontRalewayBold Fs20">2,6378 <i class="fa fa-caret-up"/></span>
                        </div>
                        <div class="Fleft MarRight20 MarBot10">
                            <span class="gray Fs21 FontRalewayMedium DispBlock">EURO (€)</span>
                            <span class="red FontRalewayBold Fs20">2,5673 <i class="fa fa-caret-down"/></span>
                        </div>
                        <div class="Fleft MarBot10">
                            <span class="gray Fs21 FontRalewayMedium DispBlock">GOLD</span>
                            <span class="orange FontRalewayBold Fs20">97,989 <i class="fa fa-caret-left"/> <i class="fa fa-caret-right"/></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Container70 Responsive50">
                <div class="ContainerIndent">
                    <div class="Container20 BorderedBox Responsive TexAlCenter">
                        <div class="ContainerIndent">
                            <span class="gray Fs18 FontRalewayMedium DispBlock">AAPL</span>
                            <span class="green FontRalewayBold Fs18">123,08 <i class="fa fa-caret-up"/></span>
                        </div>
                    </div>
                    <div class="Container20 BorderedBox Responsive TexAlCenter">
                        <div class="ContainerIndent">
                            <span class="gray Fs18 FontRalewayMedium DispBlock">GOOG</span>
                            <span class="red FontRalewayBold Fs18">98,67 <i class="fa fa-caret-down"/></span>
                        </div>
                    </div>
                    <div class="Container20 BorderedBox Responsive TexAlCenter">
                        <div class="ContainerIndent">
                            <span class="gray Fs18 FontRalewayMedium DispBlock">YHOO</span>
                            <span class="orange FontRalewayBold Fs18">99,456 <i class="fa fa-caret-left"/> <i class="fa fa-caret-right"/></span>
                        </div>
                    </div>
                    <div class="Container20 BorderedBox Responsive TexAlCenter">
                        <div class="ContainerIndent">
                            <span class="gray Fs18 FontRalewayMedium DispBlock">PRFCS</span>
                            <span class="green FontRalewayBold Fs18">178,80 <i class="fa fa-caret-up"/></span>
                        </div>
                    </div>
                    <div class="Container20 BorderedBox Responsive TexAlCenter">
                        <div class="ContainerIndent">
                            <span class="gray Fs18 FontRalewayMedium DispBlock">FTSE 100</span>
                            <span class="red FontRalewayBold Fs18">98,67 <i class="fa fa-caret-down"/></span>
                        </div>
                    </div>
                    <div class="Container20 BorderedBox Responsive TexAlCenter">
                        <div class="ContainerIndent">
                            <span class="gray Fs18 FontRalewayMedium DispBlock">DAX</span>
                            <span class="orange FontRalewayBold Fs18">99,456 <i class="fa fa-caret-left"/> <i class="fa fa-caret-right"/></span>
                        </div>
                    </div>
                    <div class="Container20 BorderedBox Responsive TexAlCenter">
                        <div class="ContainerIndent">
                            <span class="gray Fs18 FontRalewayMedium DispBlock">NIKKEI</span>
                            <span class="red FontRalewayBold Fs18">98,67 <i class="fa fa-caret-down"/></span>
                        </div>
                    </div>
                    <div class="Container20 BorderedBox Responsive TexAlCenter">
                        <div class="ContainerIndent">
                            <span class="gray Fs18 FontRalewayMedium DispBlock">DOW J</span>
                            <span class="green FontRalewayBold Fs18">123,08 <i class="fa fa-caret-up"/></span>
                        </div>
                    </div>
                    <div class="Container20 BorderedBox Responsive TexAlCenter">
                        <div class="ContainerIndent">
                            <span class="gray Fs18 FontRalewayMedium DispBlock">YHOO</span>
                            <span class="orange FontRalewayBold Fs18">99,456 <i class="fa fa-caret-left"/> <i class="fa fa-caret-right"/></span>
                        </div>
                    </div>
                    <div class="Container20 BorderedBox Responsive TexAlCenter">
                        <div class="ContainerIndent">
                            <span class="gray Fs18 FontRalewayMedium DispBlock">PRFCS</span>
                            <span class="green FontRalewayBold Fs18">178,80 <i class="fa fa-caret-up"/></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- BOX END -->

        <!-- BOX START -->
        <div class="layout-portlets-box">
            <div class="Container50 Responsive50">
                <div class="ContainerIndent">
                    <h3 class="BigTopic">
                        <div class="Wid50 Responsive50 Fleft">Car Sales Ranks</div>
                        <div class="Wid50 Fright Responsive50">
                            <p:button value="Today" styleClass="Fright"/>
                            <p:button value="Weekly" styleClass="Fright"/>
                            <p:button value="Monthly" styleClass="Fright"/>
                        </div>
                    </h3>
                    <h:form id="form">
                        <p:dataTable id="singleDT"
                                     var="car"
                                     value="#{dtSelectionView.cars2}"
                                     rows="5"
                                     paginator="true"
                                     paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                     rowsPerPageTemplate="5,10,15"
                                     selectionMode="single"
                                     selection="#{dtSelectionView.selectedCar}"
                                     rowKey="#{car.id}">

                            <f:facet name="header">
                                List Of Total Sold Cars
                            </f:facet>

                            <p:column headerText="Id" sortBy="#{car.id}">
                                <h:outputText value="#{car.id}" />
                            </p:column>
                            <p:column headerText="Year" sortBy="#{car.year}">
                                <h:outputText value="#{car.year}" />
                            </p:column>
                            <p:column headerText="Brand" sortBy="#{car.brand}">
                                <h:outputText value="#{car.brand}" />
                            </p:column>
                            <p:column headerText="Color" sortBy="#{car.color}">
                                <h:outputText value="#{car.color}" />
                            </p:column>

                            <f:facet name="footer">
                                <p:commandButton value="View"
                                                 process="singleDT"
                                                 update=":form:carDetail"
                                                 oncomplete="PF('carDialog').show()" />
                            </f:facet>
                        </p:dataTable>

                        <p:dialog header="Car Info"
                                  widgetVar="carDialog"
                                  modal="true"
                                  showEffect="fade"
                                  hideEffect="fade"
                                  resizable="false">
                            <p:outputPanel id="carDetail" style="text-align:center;">
                                <p:panelGrid columns="2" rendered="#{not empty dtSelectionView.selectedCar}">
                                    <f:facet name="header">
                                        <p:graphicImage name="demo/images/car/#{dtSelectionView.selectedCar.brand}-big.gif"/>
                                    </f:facet>

                                    <h:outputText value="Id:" style="font-weight: bold"/>
                                    <h:outputText value="#{dtSelectionView.selectedCar.id}" />

                                    <h:outputText value="Year" style="font-weight: bold"/>
                                    <h:outputText value="#{dtSelectionView.selectedCar.year}" />

                                    <h:outputText value="Color:" style="font-weight: bold"/>
                                    <h:outputText value="#{dtSelectionView.selectedCar.color}" style="color:#{dtSelectionView.selectedCar.color}"/>

                                    <h:outputText value="Price" style="font-weight: bold"/>
                                    <h:outputText value="\$#{dtSelectionView.selectedCar.price}" />
                                </p:panelGrid>
                            </p:outputPanel>
                        </p:dialog>

                        <div class="EmptyBox20"/>
                    </h:form>
                </div>
            </div>
            <div class="Container50 Responsive50">
                <div class="ContainerIndent">
                    <h3 class="BigTopic">
                        <div class="Wid50 Responsive50 Fleft">Monthly Sales Chart</div>
                        <div class="Wid50 Fright Responsive50">
                            <p:selectOneMenu id="car"
                                             value="#{selectOneMenuView.car}"
                                             styleClass="Fright"
                                             style="min-width: 150px;">
                                <f:selectItem itemLabel="Select One" itemValue="" />
                                <f:selectItems value="#{selectOneMenuView.cars}" />
                            </p:selectOneMenu>
                        </div>
                    </h3>
                    <div class="Wid100">
                        <p:chart type="line"
                                 model="#{chartView.lineModel}"
                                 responsive="true"
                                 style="height:300px;margin-top:10px"/>
                    </div>
                </div>
            </div>
        </div>
        <!-- BOX END -->

        <!-- BOX START -->
        <div class="layout-portlets-box">
            <div class="Container50 Responsive50">
                <div class="ContainerIndent">
                    <h3 class="BigTopic">
                        Successful Dealers Of The Month
                    </h3>
                    <div class="Wid45 Responsive50 Fleft">
                        <p:fieldset legend="Brian Connoly" toggleable="true" style="margin-bottom:15px;">
                            <div class="Fs16 gray FontRalewaySemiBold">Atlanta Area Tesla Dealer</div>
                            <div class="EmptyBox10"/>
                            <div class="Fs14">Whatever your budget and whatever the size of car you are looking for,
                                we are sure we can help you find what's right for you.
                                To fully appreciate the range of cars we have on offer please visit one of our showrooms.</div>
                            <div class="Seperator"/>
                            <div class="Wid100 Fs20">Total Sales <span class="Fright orange">20</span></div>
                            <div class="Wid100 Fs20">Total Turnover <span class="Fright orange">$ 1.365 K</span></div>
                        </p:fieldset>
                        <p:fieldset legend="Brian Connoly" toggleable="true" style="margin-bottom:15px;">
                            <div class="Fs16 gray FontRalewaySemiBold">Atlanta Area Tesla Dealer</div>
                            <div class="EmptyBox10"/>
                            <div class="Fs14">Whatever your budget and whatever the size of car you are looking for,
                                we are sure we can help you find what's right for you.
                                To fully appreciate the range of cars we have on offer please visit one of our showrooms.</div>
                            <div class="Seperator"/>
                            <div class="Wid100 Fs20">Total Sales <span class="Fright orange">20</span></div>
                            <div class="Wid100 Fs20">Total Turnover <span class="Fright orange">$ 1.365 K</span></div>
                        </p:fieldset>
                    </div>
                    <div class="Wid45 Responsive50 Fright">
                        <p:fieldset legend="Brian Connoly" toggleable="true" style="margin-bottom:15px;">
                            <div class="Fs16 gray FontRalewaySemiBold">Atlanta Area Tesla Dealer</div>
                            <div class="EmptyBox10"/>
                            <div class="Fs14">Whatever your budget and whatever the size of car you are looking for,
                                we are sure we can help you find what's right for you.
                                To fully appreciate the range of cars we have on offer please visit one of our showrooms.</div>
                            <div class="Seperator"/>
                            <div class="Wid100 Fs20">Total Sales <span class="Fright orange">20</span></div>
                            <div class="Wid100 Fs20">Total Turnover <span class="Fright orange">$ 1.365 K</span></div>
                        </p:fieldset>
                        <p:fieldset legend="Brian Connoly" toggleable="true" style="margin-bottom:15px;">
                            <div class="Fs16 gray FontRalewaySemiBold">Atlanta Area Tesla Dealer</div>
                            <div class="EmptyBox10"/>
                            <div class="Fs14">Whatever your budget and whatever the size of car you are looking for,
                                we are sure we can help you find what's right for you.
                                To fully appreciate the range of cars we have on offer please visit one of our showrooms.</div>
                            <div class="Seperator"/>
                            <div class="Wid100 Fs20">Total Sales <span class="Fright orange">20</span></div>
                            <div class="Wid100 Fs20">Total Turnover <span class="Fright orange">$ 1.365 K</span></div>
                        </p:fieldset>
                    </div>
                </div>
            </div>
            <div class="Container50 Responsive50">
                <div class="ContainerIndent">
                    <h3 class="BigTopic">
                        Messages From Dealers
                    </h3>
                    <h:form>
                        <p:accordionPanel>
                            <p:tab title="About Weekly Sales From Canada">
                                <h:panelGrid columns="1" cellpadding="10">
                                    <div class="Fs16 gray MarBot10 FontRalewaySemiBold">Canada Dealers Sales Increasing - 18.08.2015</div>
                                    <div class="Fs14">Whatever your budget and whatever the size of car you are looking for,
                                        we are sure we can help you find what's right for you.
                                        To fully appreciate the range of cars we have on offer please visit one of our showrooms.
                                        Whatever your budget and whatever the size of car you are looking for,
                                        we are sure we can help you find what's right for you.
                                        To fully appreciate the range of cars we have on offer please visit one of our showrooms.
                                        Whatever your budget and whatever the size of car you are looking for,
                                        we are sure we can help you find what's right for you.
                                        To fully appreciate the range of cars we have on offer please visit one of our showrooms..
                                        <br /><br />
                                        - George Sandy  |  Dealer Of Canada Motors</div>
                                </h:panelGrid>
                            </p:tab>
                            <p:tab title="Latest Sales Reports">
                                <h:panelGrid columns="1" cellpadding="10">
                                    <div class="Fs16 gray MarBot10 FontRalewaySemiBold">Canada Dealers Sales Increasing - 18.08.2015</div>
                                    <div class="Fs14">Whatever your budget and whatever the size of car you are looking for,
                                        we are sure we can help you find what's right for you.
                                        To fully appreciate the range of cars we have on offer please visit one of our showrooms.
                                        Whatever your budget and whatever the size of car you are looking for,
                                        we are sure we can help you find what's right for you.
                                        To fully appreciate the range of cars we have on offer please visit one of our showrooms.
                                        Whatever your budget and whatever the size of car you are looking for,
                                        we are sure we can help you find what's right for you.
                                        To fully appreciate the range of cars we have on offer please visit one of our showrooms..
                                        <br /><br />
                                        - George Sandy  |  Dealer Of Canada Motors</div>
                                </h:panelGrid>
                            </p:tab>
                            <p:tab title="February New Models Of Ford">
                                <h:panelGrid columns="1" cellpadding="10">
                                    <div class="Fs16 gray MarBot10 FontRalewaySemiBold">Canada Dealers Sales Increasing - 18.08.2015</div>
                                    <div class="Fs14">Whatever your budget and whatever the size of car you are looking for,
                                        we are sure we can help you find what's right for you.
                                        To fully appreciate the range of cars we have on offer please visit one of our showrooms.
                                        Whatever your budget and whatever the size of car you are looking for,
                                        we are sure we can help you find what's right for you.
                                        To fully appreciate the range of cars we have on offer please visit one of our showrooms.
                                        Whatever your budget and whatever the size of car you are looking for,
                                        we are sure we can help you find what's right for you.
                                        To fully appreciate the range of cars we have on offer please visit one of our showrooms..
                                        <br /><br />
                                        - George Sandy  |  Dealer Of Canada Motors</div>
                                </h:panelGrid>
                            </p:tab>
                            <p:tab title="Last Week Meeting Notes">
                                <h:panelGrid columns="1" cellpadding="10">
                                    <div class="Fs16 gray MarBot10 FontRalewaySemiBold">Canada Dealers Sales Increasing - 18.08.2015</div>
                                    <div class="Fs14">Whatever your budget and whatever the size of car you are looking for,
                                        we are sure we can help you find what's right for you.
                                        To fully appreciate the range of cars we have on offer please visit one of our showrooms.
                                        Whatever your budget and whatever the size of car you are looking for,
                                        we are sure we can help you find what's right for you.
                                        To fully appreciate the range of cars we have on offer please visit one of our showrooms.
                                        Whatever your budget and whatever the size of car you are looking for,
                                        we are sure we can help you find what's right for you.
                                        To fully appreciate the range of cars we have on offer please visit one of our showrooms..
                                        <br /><br />
                                        - George Sandy  |  Dealer Of Canada Motors</div>
                                </h:panelGrid>
                            </p:tab>
                        </p:accordionPanel>

                        <div class="EmptyBox20"/>

                        <div class="Container100">
                            <div class="Container40 Responsive50">
                                <p:selectOneMenu style="width:90%; float: left;">
                                    <f:selectItem itemLabel="To;" itemValue="" />
                                    <f:selectItem itemLabel="Brian Connely" itemValue="Brian Connely" />
                                    <f:selectItem itemLabel="Tony Parker" itemValue="Tony Parker" />
                                    <f:selectItem itemLabel="Jack O'Neill" itemValue="Jack O'Neill" />
                                    <f:selectItem itemLabel="Louis Alberto" itemValue="Louis Alberto" />
                                </p:selectOneMenu>
                                <div class="EmptyBox10"/>
                                <p:inputText placeholder="Subject;" styleClass="Fleft Wid90" />
                                <div class="EmptyBox30"/>
                                <p:selectBooleanCheckbox itemLabel="Send To All Dealers"/>
                            </div>
                            <div class="EmptyBox10 ShowOnMobile"/>
                            <div class="Container60 Responsive50">
                                <p:inputTextarea placeholder="Message;" rows="5" cols="20" styleClass="Wid90 Fright FloatNoneOnMobile"/>
                            </div>
                        </div>
                        <div class="EmptyBox20"/>
                        <div class="DispInlBlock Fright FloatNoneOnMobile">
                            <p:button value="Clear" styleClass="RedButton Fright"/>
                            <p:button value="Reset" styleClass="OrangeButton Fright"/>
                            <p:button value="Send" styleClass="GreenButton Fright"/>
                        </div>
                    </h:form>
                </div>
            </div>
        </div>
        <!-- BOX END -->
    </ui:define>
</ui:composition>
